<!-- 验收记录弹窗 -->
<template>
  <div>
    <a-spin :spinning="spinning">
      <a-table bordered :data-source="dataSource" :columns="columns" :pagination="false" :rowKey="
        (row, index) => {
          return index
        }
      ">
        <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
        <template slot="acceptanceRecord" slot-scope="text, record">
          <EditableCell :formType="formType" :text="text"
            @change="onCellChange(record.postCode, 'acceptanceRecord', $event)" />
        </template>
      </a-table>
      <div class="tool-btns" v-if="formType !== 'disable'">
        <a-button class="ml20" @click="handleClose"> 取消 </a-button>
        <!-- <a-popconfirm placement="top" ok-text="确定" :visible="visible" cancel-text="取消" @cancel="cancel"
          @visibleChange="handleVisibleChange" @confirm="addWarningFormSubmitHandler">
          <template slot="title">
            <p>请确认是否要提交，提交后不可修改</p>
          </template>
          <a-button class="ml20" :loading="loading" type="primary" @click="addWarningFormHandler"> 提交 </a-button>
        </a-popconfirm> -->



        <a-button class="ml20" :loading="loading" type="primary" @click="addWarningFormSubmitHandler"> 提交 </a-button>
      </div>
      <!-- 选择审批人 -->
      <selectApprover :business-id="businessId" :process-config="setProcessConfig" :is-close-upper="false"
        @close="closeSelectApprover" />
      <!-- 选择审批人 -->
    </a-spin>
  </div>
</template>

<script>
import EditableCell from './EditableCell.vue'
import { insertRecord, queryProjectCycleEarlyWarnRecord } from '@/api/project/warning'
export default {
  name: 'AcceptanceRecordCard',
  props: ['acceptanceRecordStatus', 'formType', 'row', 'insertRecord', 'form'],
  data() {
    return {
      spinning: false,
      loading: false,
      dataSource: [],
      count: 2,
      columns: [
        {
          title: '序号',
          dataIndex: 'serial',
          width: 65,
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '验证岗位',
          dataIndex: 'postName',
          width: 160
        },
        {
          title: '验证人',
          width: 100,
          dataIndex: 'accepterName'
        },
        {
          title: '验证时间',
          width: 160,
          dataIndex: 'acceptanceTime'
        },
        {
          title: '验收记录',
          dataIndex: 'acceptanceRecord',
          scopedSlots: { customRender: 'acceptanceRecord' }
        }
      ],
      visible: false,
      condition: true, // dataSource中是否 不满足验收记录至少一条不为空

      // 流程配置
      processConfig: null,
      processConfig1: null,
      //点击提交发送流程配置值
      setProcessConfig: null,
      // 业务id
      businessId: null
    }
  },

  components: { EditableCell },

  computed: {},

  watch: {
    acceptanceRecordStatus: {
      handler(val) {
        if (val) {
          this.spinning = true
          this.queryProjectCycleEarlyWarnRecord()
        }
      },
      immediate: true
    },
    form: {
      handler(val) {
        val && (this.dataSource = val)
      },
      immediate: true,
      deep: true
    }
  },

  async created() {
    //获取通过获取流程配置值
    // 黄色预警
    this.processConfig = await this.$getConfigFn('project_cycle_early_warn_yellow_record')
    // 红色预警
    this.processConfig1 = await this.$getConfigFn('project_cycle_early_warn_red_record')
  },
  mounted() {
  },

  methods: {
    // 查询填写验收记录数据
    queryProjectCycleEarlyWarnRecord() {
      queryProjectCycleEarlyWarnRecord({ id: this.row.id }).then((res) => {
        this.spinning = false
        this.dataSource = res.data
      })
    },
    handleVisibleChange(visible) {
      if (!visible) {
        this.visible = false
        return
      }
      if (this.condition) {
        // this.addWarningFormHandler()
      } else {
        this.visible = true
      }
    },
    // popconfirm提示
    addWarningFormHandler() {
      this.visible = false
      this.verifiHandler()
      if (this.condition) {
        return this.$message.error('请填写验收记录')
      }
    },
    // 提交表单
    addWarningFormSubmitHandler() {
      this.verifiHandler()
      if (this.condition) {
        return this.$message.error('请填写验收记录')
      }
      this.loading = true
      this.setProcessConfig = null
      this.submitApprovalConfirm(this.row.warnLevel == 1 ? this.processConfig : this.processConfig1, (flag) => {
        if (!flag) {
          this.loading = false
          return
        }
        insertRecord(this.dataSource.filter((v) => v.acceptanceRecord && v.acceptanceRecord !== '未填写'))
          .then((res) => {
            this.$message.success('添加成功')
            this.businessId = res.data
            switch (this.row.warnLevel) {
              case 1:
                // 黄色预警
                this.setProcessConfig = this.processConfig
                break
              case 2:
                // 红色预警
                this.setProcessConfig = this.processConfig1
                break
            }
          })
          .catch(() => {
            this.loading = false
          })
      })

    },
    // 验证是否存在 验证记录不为空的
    verifiHandler() {
      this.dataSource.map((v) => {
        v.acceptanceRecord && (v.isWrite = 1) && (v.warnId = this.row.id)
      })
      const noEmtpys = this.dataSource.filter((v) => v.acceptanceRecord && v.acceptanceRecord !== '未填写')
      if (noEmtpys && noEmtpys.length) return (this.condition = false)
      return (this.condition = true)
    },
    cancel() {
      this.visible = false
    },
    handleClose() {
      this.visible = false
      this.dataSource = []
      this.$emit('update:acceptanceRecordStatus', false)
    },
    onCellChange(key, dataIndex, value) {
      const dataSource = [...this.dataSource]
      const target = dataSource.find((item) => item.postCode === key)
      if (target) {
        target[dataIndex] = value
        this.dataSource = dataSource
      }
    },
    /**
     * @description: 选择审批人关闭回调时关闭提交弹窗
     * @return {void}
     */
    closeSelectApprover() {
      this.$emit('search')
      this.handleClose()
    }
  }
}
</script>
<style lang='less' scoped>
.tool-btns {
  margin-top: 20px;
  padding-bottom: 0;
}
</style>